<section>
	<div class="page-header">
		<h2><?php echo $title; ?></h2>
	</div>
	
	<?php echo form_open('', array('autocomplete' => 'off')); ?>
		<div class="clearfix">
			<label>Question <span class="req">*</span></label>
			<div class="input">
				<input type="text" name="question" class="span7" value="<?php echo $poll['question_title']; ?>" />
			</div>
		</div>
		<div class="clearfix">
			<label>Website <span class="req">*</span></label>
			<div class="input">
				<?php echo show_array_dropdown($websites, 'site_code', 'site_name', $poll['site_code'], 'website'); ?>
			</div>
		</div>
		<div id="answers" class="clearfix">
			<label>Answers <span class="req">*</span></label>
			<div class="input answers-sortable">
			<?php if ($poll['answers']) : ?>
				<?php foreach ($poll['answers'] as $answer) : ?>
					<div>
						<input type="text" name="answer[]" value="<?php echo $answer['answer']; ?>" data-answer_id="<?php echo $answer['poll_answer_id']; ?>" />
						<span class="btn removeAnswerBg" style="margin-left: 5px">Remove</span>
						<span class="btn handle" style="margin-left: 5px">Move</span>
					</div>
				<?php endforeach; ?>
			<?php endif; ?>
			</div>
			<div class="input">
				<span id="addAnswer" class="btn">Add Answer Field</span>
			</div>
		</div>
		<div class="clearfix">
			<label>Actions</label>
			<div class="input">
				<ul class="inputs-list">
					<li>
						<label>
							<input type="checkbox" name="published" value="y" <?php if ($poll['published'] == 'y') echo 'checked="checked"'; ?> />
							<span>Published</span>
						</label>
					</li>
				</ul>
			</div>
		</div>
		<div class="actions">
			<?php echo form_hidden('answers', ''); ?>
			<button type="submit" class="btn primary">Save</button>
			<?php echo anchor('contents/polls', 'Cancel', array('class' => 'btn')); ?>
			<?php if ($poll['updated']) : ?><span class="small">Last Updated: <?php echo display_time($poll['updated']); ?></span><?php endif; ?>
		</div>
	</form>
</section>

<style>
	#answers div div + div { margin-top: 10px; }
	#answers .answers-sortable { overflow: auto; display: inline-block; margin-left: 10px; padding-left: 10px; }
	#answers .handle { cursor: move; }
</style>
<script>
	$('.answers-sortable').sortable({ handle: '.handle' });
	
	$('#addAnswer').click(function() {
		var div = $('<div />');
		
		$('<input type="text" name="answer[]" />').appendTo(div);
		$('<span class="btn removeAnswer" style="margin-left: 9px">Remove</span>').appendTo(div);
		$('<span class="btn handle" style="margin-left: 9px">Move</span>').appendTo(div);
		
		div.appendTo($('.answers-sortable'));
	});
	
	$('.removeAnswer').live('click', function() {
		$(this).parent().remove();
	});
	
	$('.removeAnswerBg').click(function() {
		$(this).prev().attr('data-deleted', 'y').parent().addClass('hide');
	});
	
	$('form').submit(function() {
		
		var answers = new Array;
		var answer  = {};
		
		$('.answers-sortable div').each(function() {
			var div 	= $(this);
			var input 	= div.find('input');
			
			answer = {
				'answer'	: input.val(),
				'answer_id'	: input.attr('data-answer_id'),
				'deleted'	: input.attr('data-deleted')
			}
			
			answers.push(answer);
		});
		
		$('input[name="answers"]').val(JSON.stringify(answers));
	});
</script>